<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mouse-cursor-gradient-tracking</title>
    <style>
        .mouse-cursor-gradient-tracking {
            position: relative;
            background-color: #7983ff;
            padding: 0.5rem 1rem;
            font-size: 1.2rem;
            border: none;
            color: #fff;
            cursor: pointer;
            outline: none;
            overflow: hidden;
        }
        .mouse-cursor-gradient-tracking-text {
            position: relative;
        }
        .mouse-cursor-gradient-tracking::before {
            --size--: 0;
            content:"";
            position: absolute;
            left: var(--x--);
            top: var(--y--);
            width: var(--size--);
            height: var(--size--);
            background: radial-gradient(circle closest-side,pink,transparent);
            transform: translate(-50%,-50%);
            transition: width .2s ease,height .2s ease;
        }
        .mouse-cursor-gradient-tracking:hover::before {
            --size--: 200px;
        }
    </style>
</head>
<body>
    <button class="mouse-cursor-gradient-tracking">
        <span class="mouse-cursor-gradient-tracking-text">hover me</span>
    </button>
    <script>
        const btn = document.querySelector('.mouse-cursor-gradient-tracking');
        btn.addEventListener('mousemove',e => {
            const rect = e.target.getBoundingClientRect(),
                  x = e.clientX - rect.left,
                  y = e.clientY - rect.top;

            btn.style.setProperty('--x--',x + 'px');
            btn.style.setProperty('--y--',y + 'px');
        })
    </script>
</body>
</html>